<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>意见反馈</title>
    <asset:javascript src="jquery-2.2.0.min.js"/>
    <script type="text/javascript">

        function validate_required(field, alerttxt) {
            with (field) {
                apos = value.indexOf("@")
                dotpos = value.lastIndexOf(".")
                if ((apos < 1 || dotpos - apos < 2) && !/^1[35789]\d{9}$/.test(value) && !/^\d{5,11}$/gi.test(value)) {
                    alert(alerttxt);
                    return false
                }
                else {
                    return true
                }
            }
        }

        function validate_form(thisform) {
            with (thisform) {
                if (validate_required(contactWay, "格式错误") == false) {
                    contactWay.focus();
                    return false
                }
            }
        }
    </script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .container {
        text-align: center;
        margin-top: 25px;
    }

    .ra {
        font-size: 1.2rem;
        margin-top: 8px;
    }

    .text {
        width: 90%;
        height: 200px;
        margin: 15px auto;
        display: block;
        border: 1px solid #bdbdbd;
        font-size: 1.2rem;
        resize: none;
        text-indent: 5px;
        line-height: 1.5rem;
        padding: 5px;
    }

    .te {
        -webkit-appearance:none;
        color: #ffffff;
        background-color: #00a2d4;
        height: 35px;
        margin-top: 15px;
        padding: 0 55px;
        border: none;

    }

    .tex {
        width: 90%;
        height: 35px;
        margin-top: 10px;
        border: 1px solid #bdbdbd;
        text-indent: 5px;
    }

    .choose_box {
        width: 90%;
        margin: 0 auto;
        font-size: 1.2rem;
        margin: 0 auto;
    }

    .choose_box li {
        text-align: left;
        width: 48%;
        list-style: none;
        display: inline-block;
    }

    .choose_box li input {
        margin-right: 10px;
    }
    </style>
</head>

<body>
<div class="container">
    <form class="ra" action="/api/feedback/add" method="post" onsubmit="return validate_form(this)">
        <ul class="choose_box">
            <li>
                <input type="radio" name="types" value="0" required/>内容意见
            </li>
            <li>
                <input type="radio" name="types" value="1" required/>产品建议
            </li>
            <li>
                <input type="radio" name="types" value="2" required/>技术问题
            </li>
            <li>
                <input type="radio" name="types" value="3" required/>其他
            </li>
        </ul>
        <textarea rows="10" cols="45" class="text" name="content" maxlength="400"
                  placeholder="请填写具体内容帮助我们了解您的意见和建议" required></textarea>
        <input class="tex" type="text" name="contactWay" placeholder="请留下QQ、邮箱、或手机号，方便答疑解惑" required>
        <input class="te" type="submit"/>
    </form>
</div>
</body>
</html>
